.playback-controls {
  position: absolute;
  z-index: 99;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-flow: row;
  align-items: center;
  align-content: center;

  &__background {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: -1;
  }

  @include theme('dark') {
    color: colour('white');

    &__background {
      background: colour('grey');
      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.6);
    }
  }

  @include theme('light') {
    color: colour('darkest_grey');

    &__background {
      background: colour('white');
      box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.1);
    }
  }

  .current-track__wrapper {
    width: 210px;
    padding-right: 20px;
    z-index: 1;
    text-decoration: none;

    .current-track {
      width: 100%;
      display: flex;
      position: relative;
      align-items: center;

      .thumbnail {
        cursor: pointer;
        width: 44px;
        margin: 8px;
        margin-right: 12px;

        &__image {
          background-color: colour('middle_grey');
        }

        &:before {
          @include animate();
          display: block;
          content: "\f065";
          font-family: "FontAwesome";
          position: absolute;
          top: 50%;
          left: 0;
          bottom: 0;
          right: 0;
          margin-top: -9px;
          text-align: center;
          font-size: 18px;
          color: colour('white');
          z-index: 3;
          opacity: 0;
        }

        &:after {
          @include animate();
          content: "";
          display: block;
          background: rgba(0, 0, 0, 0.75);
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          border-radius: 3px;
          opacity: 0;
          z-index: 2;
        }

        &:hover {
          &:after,
          &:before {
            opacity: 1;
          }
        }
      }

      .text {
        opacity: 1;
        line-height: 1.1rem;
        font-size: 0.9rem;
        min-width: 0;
        color: inherit;
        text-decoration: none;

        .title {
          @include one_line_text;
        }

        .links-sentence {
          opacity: 0.5;
          display: block;
          @include one_line_text;

          &__item {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px dotted transparent;
          }
        }
      }
    }
  }

  .control {
    @include animate();
    @include noselect();
    @include click_feedback();
    cursor: pointer;
    padding: 12px 8px;
    display: inline-block;
    vertical-align: bottom;
    background: none;
    color: colour('white');

    @include theme('light') {
      color: colour('darkest_grey');
    }

    .icon {
      font-size: 0.9rem;
      margin-bottom: 0;
    }

    &--active {
      color: colour('turquoise') !important;
    }

    &:hover,
    &:focus {
      opacity: 1;
    }
  }

  section {
    &.playback {
      display: flex;
      align-items: center;
      .control {
        padding: 4px;

        .icon {
          font-size: 1.3rem;
        }

        &.play {
          @include theme('light') {
            color: colour('turquoise');
          }

          .icon {
            font-size: 3rem;
          }
        }
      }
    }

    &.progress {
      flex-grow: 1;
      display: flex;
      align-items: center;

      .slider {
        flex-grow: 1;
      }

      .time {
        font-size: 11px;
        width: 40px;

        &--current {
          text-align: right;
          padding-right: 10px;
        }

        &--total {
          padding-left: 10px;
        }
      }
    }

    &.settings {
      text-align: center;
      padding: 0 30px;
    }

    &.volume {
      font-size: 18px;
      width: 10rem;
      padding-right: 30px;
      display: flex;
      align-items: center;

      .slider__wrapper {
        flex-grow: 1;
      }
    }

    &.triggers {
      display: none;
    }
  }

  @include responsive($bp_medium) {
    padding-top: 2px;
    padding-bottom: 4px;

    &--touch-enabled .control.next {
      display: none;
    }

    .current-track__wrapper {
      order: 2;
      flex-grow: 1;
      text-align: center;
      font-size: 0.9rem;
      line-height: 1.2em;
      margin: 0;
      padding: 0;
      display: flex;

      .text {
        padding: 0;
        flex-grow: 1;

        .title,
        .artist {
          padding-top: 0;
        }
      }

      .thumbnail-wrapper {
        display: none;
      }
    }

    section {
      &.playback {
        order: 1;
        width: 6rem;

        .control {
          &.play {
            padding: 4px;
          }

          &.previous,
          &.stop {
            display: none;
          }
        }
      }

      &.settings,
      &.volume {
        display: none;
      }

      &.progress {
        position: absolute;
        top: auto;
        bottom: -10px;
        left: 0;
        right: 0;

        .slider__track {
          border-radius: 0;

          &__progress {
            border-radius: 0;
          }
        }

        .time {
          display: none;
        }
      }

      &.triggers {
        display: block;
        width: 6rem;
        order: 3;
        text-align: center;

        .icon {
          font-size: 1.2rem;
        }

        @include resolution(2) {
          bottom: 4px;

          .icon {
            font-size: 1.4rem;
          }
        }

        .sidebar-toggle.open {
          opacity: 1 !important;

          &:before {
            background: rgba(0, 0, 0, 0.8);
            content: "";
            display: block;
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100vw;
            height: 100vh;
            z-index: 99;
          }
        }
      }
    }

    &--expanded {
      max-height: 100%;

      .playback-controls__background {
        height: 150px;
      }

      section {
        &.settings {
          position: absolute;
          display: flex;
          right: 0;
          bottom: 60px;
          padding-right: 10px;
          text-align: right;
          width: 100px;
        }

        &.volume {
          position: absolute;
          width: auto;
          display: flex;
          right: 100px;
          left: 10px;
          bottom: 58px;

          @include resolution(2) {
            right: 115px;

            .slider__wrapper {
              bottom: 9px;
            }
          }
        }
      }
    }

    @include resolution(2) {
      .control {
        padding: 14px 8px;
      }
    }
  }

  @include responsive($bp_narrow) {
    .current-track__wrapper {
      width: 50%;
    }
    
    .control {
      padding: 12px 4px;
    }

    section {
      &.playback {
        width: auto;
      }

      &.triggers {
        width: 4.5rem;

        .icon {
          font-size: 1.2rem;
        }
      }
    }
  }
}
